<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Page Title</title>
    <link rel="stylesheet" href="../theme/styles/styles.css" type="text/css" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
    <script src="jquery.imoverlabel.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.overlabel').imOverlabel();   
        });
    </script>
    
    <style type="text/css">
        fieldset {
            position: relative;
        }
               
        input {
            height: 18px;
            line-height: 18px;
            padding-left: 10px;
            font-size: 12px;
        }
        
        label {
            position: absolute;
            left: 0px;
            top: 4px;
            display: block;
            height: 20px;
            line-height:20px;
            font-size: 12px;
            padding-left: 10px;
        }
    </style>
</head>

<body>
<div class="wrap">
    <h1>jQuery Overlabel plugin</h1>
    <div class="date-release">
        Last release: 12-01-2012
    </div>
    
    <h3>How to used:</h3>
    <pre>
$(document).ready(function() {
    $('.overlabel').imOverlabel();   
});
    </pre>
    
    <h3>Demo:</h3>
    <form>
        <fieldset>
            <label class="overlabel" for="input1">Enter text here...</label>
            <input type="text" id="input1" /> 
        </fieldset>
    </form>

</div>
</body>
</html>